<template>
  <div id="resizer_bar" class="slide_tool_bar">
    <div class="tool_bar_item">
      <div
        class="bar_item"
        :class="{bar_item_disabled:false}"
        @click="SetEditorZoomAttr({attrName: 'isDraw',attrValue: false})"
      >
        <img
          class="bar_item_img"
          title="指针"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/pointer.png"
        >
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="DrawSign">
        <img
          class="bar_item_img"
          title="标注"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/brush_icon.png"
        >
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="RemoveSign">
        <img
          class="bar_item_img"
          title="清除标注"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/clear_icon.png"
        >
        <!-- <span class="bar_item_text">清除标注</span> -->
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="isZoom=false">
        <img
          class="bar_item_img"
          title="返回到编辑区"
          src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/exit.png"
        >
        <!-- <span class="bar_item_text">取消</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
// import bus from '../../../common/bus'
// import events from '../../../common/typeEvents'
import actions from '../../common/typeActions'
// import M from '../../../common/typeMutations.js'

export default {
  name: 'SlideZoomToolBar',
  data () {
    return {}
  },
  computed: {
    ...mapState({ zoomImage: state => state.slideEditor.zoomImage }),
    isZoom: {
      get () {
        return this.zoomImage.isZoom
      },
      set (value) {
        this.SetEditorZoomAttr({ attrName: 'isZoom', attrValue: value })
      }
    }
  },
  methods: {
    ...mapActions({
      SetEditorZoomAttr: actions.SLIDEEDITOR.SetEditorZoomAttr,
      RemoveEditorZoomSign: actions.SLIDEEDITOR.RemoveEditorZoomSign
    }),
    zoomIn: function () {
      let zoomMultiples = this.zoomImage.zoomMultiples + 0.1
      if (zoomMultiples > 3) return
      this.SetEditorZoomAttr({
        attrName: 'zoomMultiples',
        attrValue: zoomMultiples
      })
    },
    // test: function(){
    //   this.SetEditorZoomAttr({attrName: 'isDraw',attrValue: false})
    //   this.$store.commit(M.SLIDEEDITOR.RemoveEditorZoomSignAll)
    // },
    zoomOut: function () {
      let zoomMultiples = this.zoomImage.zoomMultiples - 0.1
      if (zoomMultiples < 0.5) return
      this.SetEditorZoomAttr({
        attrName: 'zoomMultiples',
        attrValue: zoomMultiples
      })
    },
    RemoveSign: function () {
      this.RemoveEditorZoomSign()
    },
    DrawSign: function () {
      this.SetEditorZoomAttr({
        attrName: 'isDraw',
        attrValue: true
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#resizer_bar .slide_tool_bar {
  width: 100%;
  height: calc(100% - 100px);
  background: #288ed3;
  /*float: left;*/
}

#resizer_bar .tool_bar_item {
  width: 40px;
  height: 100%;
  display: inline-block;
  /*float: left;*/
  position: relative;
  color: #bee2fa;
}

#resizer_bar .tool_bar_item:hover {
  background: #c7d3e4;
  color: white;
}

#resizer_bar .bar_item {
  cursor: pointer;
  height: 100%;
  width: 100%;
}

#resizer_bar .bar_item_img {
  /*float: left;*/
  /*margin: 11px 16px;*/
  height: 100%;
  padding: 10px;
  padding-right: 6px;
}

#resizer_bar .bar_item_text {
  line-height: 40px;
  color: black;
  font-size: 14px;
}

.bar_group_separator {
  display: inline-block;
  background-color: #c0c0c0;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 5px 2px 0;
  height: 18px;
  width: 1px;
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5);
}
</style>
